<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://lib.baomitu.com/vue/2.5.1/vue.js"></script>
	<style>
	</style>
</head>
<body>
	
	<div id="app">
		<input  type="button" value="toggle" @click="toggle"/>
		<input  type="button" value="toggle" @click="flag=!flag"/>
		<!-- v-if 的特点：每次都会重新删除或创建元素 -->
		<!-- v-show的特点：每次不会重新进行DOM的删除和创建元素，只是切换元素的display：none样式 -->
		<!-- v-if有较高的切换性能消耗 -->
		<!-- v-show有较高的初始性能消耗 -->
		<!-- 如果元素会频繁的使用最好不要使用v-if，要用v-show，反之，使用v-if -->
		<h3 v-if="flag">这是用v-if控制元素</h3>
		<h3 v-show="flag">这是用v-show控制元素</h3>
	</div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data: {
				flag:false
			},
			methods:{
				toggle:function(){
					this.flag=!this.flag;
				}
			}
		})
	</script>
</body>
</html>